Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Tooltip Transitions
We can add tooltip transitions with the transition-show and transition-hide props:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout view="lHh Lpr lFf" container style="height: 100vh;">
<div class="q-pa-md">
<q-btn color="primary" label="Flip">
<q-tooltip transition-show="flip-right" transition-hide="flip-left">
tooltip
</q-tooltip>
</q-btn>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
transition-show is applied when we show the tooltip.
And transition-hide is applied when we hide it.
Other values include scale and rotate .
Tooltip Target
We can set the target prop of the q-tooltip component to let us set the tooltip to open when we hover over the element with the given selector.
For instance, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout view="lHh Lpr lFf" container style="height: 100vh;">
<div class="q-pa-md">
<q-img
src="https://cdn.quasar.dev/img/material.png"
id="target-img-1"
style="height: 100px;"
>
<div
class="absolute-bottom-right"
style="border-top-left-radius: 5px;"
>
#target-img-1
</div>
</q-img>
<q-tooltip
:target="targetEl"
anchor="center middle"
self="center middle"
content-class="bg-black"
>
tooltip
</q-tooltip>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
targetEl: "#target-img-1"
}
});
</script>
</body>
</html>
We set target to '#target-img-1' , so when we hover over the image, the tooltip will show.
This gives us more flexibility with placing the tooltip.
Tooltip Position
We can change the position of the tooltip with the anchor and self props:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout view="lHh Lpr lFf" container style="height: 100vh;">
<div class="q-pa-md">
<q-btn color="primary" label="hover me">
<q-tooltip anchor="bottom right" self="top middle">
tooltip
</q-tooltip>
</q-btn>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
targetEl: "#target-img-1"
}
});
</script>
</body>
</html>
anchor changes the position of the tooltip relative to its target.
self changes its own position relative to its target.
Each of these props can be a combination of top , center , or bottom and left , middle or right .
Conclusion
We can add a tooltip with various positions and transitions with Quasar’s q-tooltip component into our Vue app.
